<template>
  <div class="app-container">
    <el-form class="form-data" ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <el-form-item label="支出场景" prop="payType">
                  <el-select v-model="form.payType" placeholder="请选择支出场景" style="width: 100%;">
                    <el-option label="请选择字典生成" value=""/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支出金额" prop="money">
                  <el-input-number v-model="form.money" :controls="false" placeholder="请输入支出金额" style="width: 100%;"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付方式" prop="payType">
                  <el-select v-model="form.payType" placeholder="请选择支出方式" style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.sys_pay_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支出账户" prop="account">
                  <el-input v-model="form.account" placeholder="请输入支出账户"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付截图" prop="payImg">
              <ImageUpload v-model="form.qqWalletImg" size="mini" :isShowTip="false"></ImageUpload>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" :rows="6" maxlength="200" show-word-limit placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <el-divider></el-divider>
    <div class="dialog-footer">
      <div style="flex: 1;">
      </div>
      <div style="padding: 0 20px;line-height: 36px;">
        当前操作人: {{ $store.getters.nickName }}
      </div>
      <div>
      <el-button type="primary" @click="submitForm">提交数据</el-button>
      <el-button type="info" @click="reset">清空数据</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import recoveryInfoApi from '@/api/zyl/recovery/recoveryInfo'
import gameListApi from '@/api/gameConfig/gameList'
import gameDictionaryApi from '@/api/gameConfig/gameDictionary'
import supplyConfigApi from '@/api/system/supplyConfig'

export default {
  name: 'RecoveryOtherExpenses',
  dicts: ['sys_pay_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      gameList: [], // 游戏
      sysList: [], // 系统
      carrierList: [], //运营商列表
      areaList: [], //大区列表
      serverList: [], //服务器列表
      GameSelectedType: null, //游戏类型
      allUsers: [], //用户列表
      createTimeHover: false, //鼠标悬停创建时间上
      rebindingTimeHover: false, //鼠标悬停换绑时间上
      activeTab: 'recoveryData'
    }
  },
  created() {
    this.getGameList()
    this.getAllUserList()
    this.handleAdd()
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        remark: null,
        account: null,
        money: undefined,
        gameId: null,
        systemId: null,
        trading: null,
        recoveryChannel: null,
        accountNumber: null,
        accountPassword: null,
        recoveryPrice: null,
        clientType: null,
        payType: null,
        saleMoney: null,
        phone: null,
        changeUserId: null,
        name: null,
        numbers: null,
        cipher: null,
        nickName: null,
        isFriend: null,
        userId: null,
        contract: null,
        retrieve: null,
        payImg: null,
        antiAddictionImg: null,
        qqWalletImg: null,
        accountImg: null,
        descs: null,
        labelsId: null,
        rebindingTime: null,
        rebindingType: null
      }
      this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加回收账号'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      recoveryInfoApi.getRecoveryInfo(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改回收账号'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            recoveryInfoApi.updateRecoveryInfo(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            recoveryInfoApi.addRecoveryInfo(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除回收账号编号为"' + ids + '"的数据项？').then(function() {
        return recoveryInfoApi.delRecoveryInfo(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal.confirm('是否确认导出所有回收账号数据项？').then(() => {
        this.exportLoading = true
        return recoveryInfoApi.exportRecoveryInfo(queryParams)
      }).then(response => {
        this.$download.name(response.msg)
        this.exportLoading = false
      }).catch(() => {
      })
    },
    /** 复制账号按钮操作 */
    handleCopyAccount(row) {

    },
    /** 复制详情按钮操作 */
    handleCopyDetail(row) {

    },
    /** 修改记录按钮操作 */
    handleUpdateRecord(row) {

    },
    /** 添加标签按钮操作 */
    handleAddTags(row) {

    },
    // 游戏列表
    getGameList() {
      gameListApi.getGameList().then((res) => {
        this.gameList = res.rows
      })
    },
    selectGameType(val) {
      if (!val) {
        val = null
        this.sysList = []
        this.carrierList = []
        this.areaList = []
        return
      }
      this.gameList.forEach((r) => {
        if (r.id == val) {
          this.GameSelectedType = r.type
        }
      })
      if (this.GameSelectedType === 0) {
        // 手游
        // 获取系统列表和运营商列表
        this.getSysList()
        this.getYysList()
      } else {
        // 端游
        // 获取大区列表
        this.getAreaList2()
      }
      this.handleQuery()
    },
    // 获取系统列表
    getSysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.queryParams.gameId,
          systemKey: 'system'
        })
        .then((res) => {
          this.sysList = res.rows
        })
    },
    // 获取运营商列表
    getYysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.queryParams.gameId,
          systemKey: 'carrier'
        })
        .then((res) => {
          this.carrierList = res.rows
        })
    },
    // 运营商改变  获取大区列表
    getAreaList(e) {
      this.search()
      let obj = {
        gameId: this.queryParams.gameId,
        systemKey: 'group'
      }
      this.queryParams.groupId = ''
      this.queryParams.serverId = ''

      // 运营商改变 找出选择的运营商的对象
      if (e) {
        this.carrierList.forEach((i) => {
          if (i.id == e) {
            obj.systemKey = i.systemKey + 'group'
          }
        })
      }
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows
      })
    },
    // 大区改变  获取服务器列表
    getServiceList(e) {
      this.search()
      this.queryParams.serverId = ''

      if (e) {
        gameDictionaryApi
          .getList({
            parentId: e
          })
          .then((res) => {
            this.serverList = res.rows
          })
      } else {
        this.serverList = []
      }
    },
    //端游 直接获取大区
    getAreaList2() {
      let obj = {
        gameId: this.queryParams.gameId,
        systemKey: 'group'
      }
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows
      })
    },
    getAllUserList() {
      supplyConfigApi.getAllUserList().then((res) => {
        this.allUsers = res.rows
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form-data {
  height: calc(100vh - 310px);
}
.dialog-footer {
  display: flex;
}
</style>
